// import { Form, Input, Select } from 'element-react';
import { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Tooltip,
  Table,
  Tag,
  Space,
  Badge,
  Modal,
  Radio,
  Image,
} from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
  DeleteOutlined,
  SyncOutlined,
  AppstoreOutlined,
  EditOutlined,
} from '@ant-design/icons';
import { ProdProdTagModelState, useDispatch, useSelector } from 'umi';
import './index.less';
import { timestampToTime } from '@/utils/timestamp';
import { UserUserModelState } from '@/models/userUser';
const { Option } = Select;
export default function UserUser() {
  const { userUserList, userUserListLength } = useSelector(
    (state: { userUser: UserUserModelState }) => state.userUser,
  );
  const dispatch = useDispatch();
  const [name, setName] = useState('');
  const [state, setState] = useState(undefined);
  const [flag, setFlag] = useState(true);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [form] = Form.useForm();
  const [getFrom] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isNewAdd, setIsNewAdd] = useState(false);
  const [isNewAddModal, setIsNewAddModal] = useState(false);
  const [id, setId] = useState(0);
  const [isAdd, setIsAdd] = useState(false);
  const [radioStatus, setRadioStatus] = useState(1);
  const [radioListStyle, setRadioListStyle] = useState(0);
  const [fromName, setFromName] = useState('');
  const [fromSort, setFromSort] = useState('');
  const [avatar, setAvatar] = useState('');
  useEffect(() => {
    dispatch({
      type: 'userUser/getUserUserList',
      payload: {
        page,
        pageSize,
      },
    });
  }, [page, pageSize]);
  const onInput = (e: any) => {
    setName(e.target.value);
  };
  const handleChange = (value: any) => {
    setState(value);
  };
  const onEmpty = () => {
    form.setFieldsValue({ name: '', state: undefined });
    setName('');
    setState(undefined);
  };
  //搜索
  const onSearch = () => {
    if (name || state) {
      dispatch({
        type: 'prodProdTag/getSearchProdProdTag',
        payload: {
          page,
          pageSize,
          title: name,
          status: state,
        },
      });
    }
  };
  //显隐
  const onDisplay = () => {};
  //搜索按钮显示from
  const onFlag = () => {
    setFlag(!flag);
  };
  //刷新
  const onRefresh = () => {
    window.location.reload();
  };
  const handleOk = () => {
    dispatch({
      type: 'prodProdTag/getDelProdProdTag',
      payload: {
        id,
      },
    });
    window.location.reload();
    setIsModalVisible(false);
  };
  function publicStatus() {
    getFrom.setFieldsValue({
      fromListStyle: 0,
      fromName: '',
      fromStatus: 1,
      fromSort: '',
    });
    setRadioStatus(1);
    setRadioListStyle(0);
    setFromName('');
    setFromSort('');
  }
  const handleCancel = () => {
    setIsModalVisible(false);
    setIsNewAddModal(false);
    publicStatus();
  };
  const onRadioStatus = (e: any) => {
    setRadioStatus(e.target.value);
  };
  const onYes = () => {
    if (isAdd) {
      dispatch({
        type: 'prodProdTag/getAddProdProdTag',
        payload: {
          id: 0,
          isDefault: null,
          prodCount: null,
          seq: fromSort,
          shopId: null,
          status: radioStatus,
          style: radioListStyle,
          t: new Date().getTime(),
          title: fromName,
        },
      });
      setIsNewAddModal(false);
      publicStatus();
      window.location.reload();
    } else {
    }
  };
  const columns: any[] = [
    {
      title: '用户昵称',
      dataIndex: 'nickName',
      key: 'index',
      align: 'center',
    },
    {
      title: '用户头像',
      dataIndex: 'pic',
      key: 'pic',
      align: 'center',
      render: (value: string) => {
        return <img src={value} alt="" />;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'userId',
      align: 'center',
      render: (value: string) => {
        return (
          <span>
            <span>
              {value == '1' ? (
                <Tag color="blue">正常</Tag>
              ) : (
                <Tag color="red">禁用</Tag>
              )}
            </span>
          </span>
        );
      },
    },
    {
      title: '注册时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (value: any) => (
        <Space size="middle">
          <Button
            type="primary"
            icon={<EditOutlined />}
            onClick={() => {
              setIsAdd(false);
              setAvatar(value.pic)
              setFromName(value.nickName)
              console.log(value.nickName,'fromName...');
              
              setState(value.status)
              setIsNewAddModal(true);
            }}
          >
            修改
          </Button>
        </Space>
      ),
    },
  ];
  return (
    <div className="user-user">
      <div
        className="user-user-from"
        style={flag ? { display: 'block' } : { display: 'none' }}
      >
        <Form layout="inline" form={form}>
          <Form.Item name="name" label="用户昵称">
            <Input
              placeholder="用户昵称"
              value={name}
              onChange={(e) => onInput(e)}
            />
          </Form.Item>
          <Form.Item name="state" label="状态">
            <Select
              placeholder="状态"
              style={{ width: 191 }}
              allowClear
              onChange={handleChange}
            >
              <Option value="0">禁用</Option>
              <Option value="1">正常</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} onClick={onSearch}>
              搜索
            </Button>
            <Button icon={<DeleteOutlined />} onClick={onEmpty}>
              清空
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className="avue-crud">
        <div className="avue-crud-left"></div>
        <div className="avue-crud-right">
          <Tooltip title="刷新">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onRefresh}
            />
          </Tooltip>
          <Tooltip title="显隐">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onDisplay}
            />
          </Tooltip>
          <Tooltip title="搜索">
            <Button
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onFlag}
            />
          </Tooltip>
        </div>
      </div>
      <Table
        bordered={true}
        columns={columns}
        dataSource={userUserList}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
          pageSize: pageSize,
          onChange: function (page, pageSize) {
            setPageSize(pageSize);
            setPage(page);
          },
          showTotal: (total) => `共 ${total} 条`,
          total: userUserListLength,
        }}
      />
      <Modal
        title={isAdd ? '新增' : '修改'}
        visible={isNewAddModal}
        cancelText="取消"
        okText="确定"
        onOk={onYes}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          form={getFrom}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          autoComplete="off"
          style={{ margin: 0 }}
        >
          <Form.Item label="用户头像" name="fromAvatar">
            <Image width={132} height={132} src={avatar} />
          </Form.Item>
          <Form.Item label="用户昵称" name="fromName">
            <Input
              value={fromName}
              onChange={(e) => setFromName(e.target.value)}
            />
          </Form.Item>
          <Form.Item label="状态" name="fromState">
            <Radio.Group onChange={onRadioStatus}>
              <Radio value={0}>禁用</Radio>
              <Radio value={1}>正常</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
